<template>
	<view :style="deviceWidth ? { width: deviceWidth + 'px' } : ''" style="margin: 0 auto;">
		<view data-v-a022a9c8="" class="page-mobile" id="home"
			:style="deviceWidth ? { width: deviceWidth + 'px' } : ''">
			<view data-v-a022a9c8="" style="position: fixed; top: 0px;  z-index: 100000;"
				:style="deviceWidth ? { width: deviceWidth + 'px' } :  { width: 100 + '%' }">
				<view data-v-3d27c785="" data-v-a022a9c8="" class="navbar" @click="backpage()">
					<view data-v-3d27c785="" class="nav-left"><svg data-v-3d27c785="" t="1717429926103" class="icon"
							viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19911"
							width="16" height="16">
							<path data-v-3d27c785=""
								d="M350.62 514.18l392.72-395.43a32 32 0 0 0-45.41-45.1L282.66 491.78a32 32 0 0 0 0.16 45.25l415.27 412.44a32 32 0 1 0 45.1-45.41z"
								fill="#fff" p-id="19912"></path>
						</svg><span data-v-3d27c785="" style="font-size: 30rpx;margin-left: 10rpx;">返回</span></view>
					<view data-v-3d27c785="" class="nav-center">開獎接口</view>
					<view data-v-3d27c785="" class="nav-right"></view>
				</view>
			</view>
			<view data-v-a022a9c8="" style="height: 120rpx"></view>
			<view class="frequency-box">
				<view class="frequency-item " :class="item.checked?'active':'noactive'" v-for="(item,index) in tab"
					:key="index" @click="checktab(item,index)">
					{{item.name}}
				</view>
			</view>
			<!-- <pre>{{valss}}</pre> -->
			<view class="" style="padding: 20rpx;" v-if="tabname == '新澳門六合彩'">
				<view class="allfor" v-for="(item,index) in xinaomen" :key="index" @click="checkxinaomen(item,index)">
					<view class="dis">
						<view class="nametxt">{{item.name}}</view>
						<image src="../../static/rightsanjaio.png" :class="item.checked?'rimg2':'rimg'" mode=""></image>
					</view>
					<view class="" v-if="item.checked == true">
						<view class="disnoa" style="margin-top: 20rpx;">
							<view class="jktype">{{item.type}}</view>
							<view class="jkurl">{{item.url}}</view>
						</view>
						<view class="qqcstxt">請求參數</view>
						<view class="qngqiucans" v-if="!item.requestparams  ">
							無
						</view>
						<view class="qngqiucans" v-if="item.requestparams  ">
							<view class="dis">
								<view class="nianfen">{{item.requestparams.cs}}</view>
								<view class="nianfenzhi">{{item.requestparams.cs2}}</view>
								<view class="bixu">{{item.requestparams.istrue}}</view>
							</view>

						</view>
						<view class="qqcstxt">響應體</view>
						<view class="xiangyingit">
							<view class="fuzhianniu">
								<view class=""></view>
								<view class="copyan" @click="copyurl(item.value)">複製</view>
							</view>
							<pre class="" style="font-size: 26rpx;">{{item.value}}</pre>
						</view>
					</view>

				</view>
			</view>
			<view class="" style="padding: 20rpx;" v-if="tabname == '澳門六合彩'">
				<view class="allfor" v-for="(item,index) in xinaomen2" :key="index" @click="checkxinaomen2(item,index)">
					<view class="dis">
						<view class="nametxt">{{item.name}}</view>
						<image src="../../static/rightsanjaio.png" :class="item.checked?'rimg2':'rimg'" mode=""></image>
					</view>
					<view class="" v-if="item.checked == true">
						<view class="disnoa" style="margin-top: 20rpx;">
							<view class="jktype">{{item.type}}</view>
							<view class="jkurl">{{item.url}}</view>
						</view>
						<view class="qqcstxt">請求參數</view>
						<view class="qngqiucans" v-if="!item.requestparams  ">
							無
						</view>
						<view class="qngqiucans" v-if="item.requestparams  ">
							<view class="dis">
								<view class="nianfen">{{item.requestparams.cs}}</view>
								<view class="nianfenzhi">{{item.requestparams.cs2}}</view>
								<view class="bixu">{{item.requestparams.istrue}}</view>
							</view>

						</view>
						<view class="qqcstxt">響應體</view>
						<view class="xiangyingit">
							<view class="fuzhianniu">
								<view class=""></view>
								<view class="copyan" @click="copyurl(item.value)">複製</view>
							</view>
							<pre class="" style="font-size: 26rpx;">{{item.value}}</pre>
						</view>
					</view>

				</view>
			</view>
			<view class="" style="padding: 20rpx;" v-if="tabname == '澳門六合彩3分'">
				<view class="allfor" v-for="(item,index) in xinaomen3" :key="index" @click="checkxinaomen3(item,index)">
					<view class="dis">
						<view class="nametxt">{{item.name}}</view>
						<image src="../../static/rightsanjaio.png" :class="item.checked?'rimg2':'rimg'" mode=""></image>
					</view>
					<view class="" v-if="item.checked == true">
						<view class="disnoa" style="margin-top: 20rpx;">
							<view class="jktype">{{item.type}}</view>
							<view class="jkurl">{{item.url}}</view>
						</view>
						<view class="qqcstxt">請求參數</view>
						<view class="qngqiucans" v-if="!item.requestparams  ">
							無
						</view>
						<view class="qngqiucans" v-if="item.requestparams  ">
							<view class="dis">
								<view class="nianfen">{{item.requestparams.cs}}</view>
								<view class="nianfenzhi">{{item.requestparams.cs2}}</view>
								<view class="bixu">{{item.requestparams.istrue}}</view>
							</view>

						</view>
						<view class="qqcstxt">響應體</view>
						<view class="xiangyingit">
							<view class="fuzhianniu">
								<view class=""></view>
								<view class="copyan" @click="copyurl(item.value)">複製</view>
							</view>
							<pre class="" style="font-size: 26rpx;">{{item.value}}</pre>
						</view>
					</view>

				</view>
			</view>

		</view>
		<view style="height: 150rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				deviceWidth: null,
				deviceWidth2: 0,
				tab: [{
						name: '新澳門六合彩',
						value: 1,
						checked: true,
					},
					{
						name: '澳門六合彩',
						value: 2,
						checked: false,
					}, {
						name: '澳門六合彩3分',
						value: 3,
						checked: false,
					}
				],
				tabname: '新澳門六合彩',
				xinaomen: [{
						name: '最新一期開獎接口:(平台盤口專用）',
						id: 1,
						checked: true,
						type: 'GET',
						url: 'https://api.macaumarksix.com/api/macaujc2.com',
						requestparams: '',
						value: [{
							"expect": "2024155",
							"opencode": "11,38,43,19,40,07,35",
							"zodiac": "馬,兔,狗,狗,牛,狗,馬",
							"openTime": "2023-06-03 21:32:32",
							"wave": "green,green,green,red,red,red,red",
							"info": "數據來源macaujc.com"
						}]
					},
					{
						name: '一顆一顆開獎接口（資料網專用）',
						id: 2,
						checked: false,
						type: 'GET',
						url: 'https://api.macaumarksix.com/api/live2',
						requestparams: '',
						value: [{
							"expect": "2024155",
							"opencode": "11,38,43,19,40,07,35",
							"zodiac": "馬,兔,狗,狗,牛,狗,馬",
							"openTime": "2023-06-03 21:32:32",
							"wave": "green,green,green,red,red,red,red",
							"info": "數據來源macaujc.com"
						}]
					},
					{
						name: '歷史開獎接口',
						id: 3,
						checked: false,
						type: 'GET',
						url: 'https://api.macaumarksix.com/history/macaujc2/y/${year}',
						requestparams: {
							cs: 'year',
							cs2: 'number 年份',
							istrue: '必須'
						},
						value: {
							"result": true,
							"message": "操作成功！",
							"code": 200,
							"data": {
								"result": true,
								"message": "操作成功！",
								"code": 200,
								"data": [{
									"expect": "2024155",
									"opencode": "11,38,43,19,40,07,35",
									"zodiac": "馬,兔,狗,狗,牛,狗,馬",
									"openTime": "2024-06-03 21:32:32",
									"type": "macaujc3",
									"wave": "green,green,green,red,red,red,red",
									"info": "數據來源macaujc.com"
								}],
								"timestamp": 1717468655066
							}
						}
					},
					{
						name: '按期號查詢',
						id: 4,
						checked: false,
						type: 'GET',
						url: 'https://api.macaumarksix.com/history/macaujc2/expect/${number}',
						requestparams: {
							cs: 'number',
							cs2: 'number 期號',
							istrue: '必須'
						},
						value: {
							"result": true,
							"message": "操作成功！",
							"code": 200,
							"data": [
								null
							],
							"timestamp": 1717468688977
						}
					},
					{
						name: '直播調用接口flv',
						id: 5,
						checked: false,
						type: 'GET',
						url: 'https://live-macaujc.com/live/livestream/new.flv',
						requestparams: '',
						value: "直播流"
					},
					{
						name: '直播調用接口m3u8',
						id: 6,
						checked: false,
						type: 'GET',
						url: 'https://live-macaujc.com/live/livestream/new.m3u8',
						requestparams: '',
						value: "直播流"
					}
				],
				xinaomen2: [{
						name: '最新一期開獎接口:(平台盤口專用）',
						id: 1,
						checked: true,
						type: 'GET',
						url: 'https://api.macaumarksix.com/api/macaujc.com',
						requestparams: '',
						value: [{
							"expect": "2024155",
							"opencode": "11,38,43,19,40,07,35",
							"zodiac": "馬,兔,狗,狗,牛,狗,馬",
							"openTime": "2023-06-03 21:32:32",
							"wave": "green,green,green,red,red,red,red",
							"info": "數據來源macaujc.com"
						}]
					},
					{
						name: '一顆一顆開獎接口（資料網專用）',
						id: 2,
						checked: false,
						type: 'GET',
						url: 'https://api.macaumarksix.com/api/live',
						requestparams: '',
						value: [{
							"expect": "2024155",
							"opencode": "11,38,43,19,40,07,35",
							"zodiac": "馬,兔,狗,狗,牛,狗,馬",
							"openTime": "2023-06-03 21:32:32",
							"wave": "green,green,green,red,red,red,red",
							"info": "數據來源macaujc.com"
						}]
					},
					{
						name: '歷史開獎接口',
						id: 3,
						checked: false,
						type: 'GET',
						url: 'https://api.macaumarksix.com/history/macaujc/y/${year}',
						requestparams: {
							cs: 'year',
							cs2: 'number 年份',
							istrue: '必須'
						},
						value: {
							"result": true,
							"message": "操作成功！",
							"code": 200,
							"data": [{
								"expect": "2024155",
								"opencode": "11,38,43,19,40,07,35",
								"zodiac": "馬,兔,狗,狗,牛,狗,馬",
								"openTime": "2024-06-03 21:32:32",
								"type": "macaujc3",
								"wave": "green,green,green,red,red,red,red",
								"info": "數據來源macaujc.com"
							}],
							"timestamp": 1717468655066
						}
					},
					{
						name: '按期號查詢',
						id: 4,
						checked: false,
						type: 'GET',
						url: 'https://api.macaumarksix.com/history/macaujc/expect/${number}',
						requestparams: {
							cs: 'number',
							cs2: 'number 期號',
							istrue: '必須'
						},
						value: {
							"result": true,
							"message": "操作成功！",
							"code": 200,
							"data": [
								null
							],
							"timestamp": 1717468688977
						}
					},
					{
						name: '直播調用接口flv',
						id: 5,
						checked: false,
						type: 'GET',
						url: 'https://live-macaujc.com/live/livestream/macaujc2230.flv',
						requestparams: '',
						value: "直播流"
					},
					{
						name: '直播調用接口m3u8',
						id: 6,
						checked: false,
						type: 'GET',
						url: 'https://live-macaujc.com/live/livestream/macaujc2230.m3u8',
						requestparams: '',
						value: "直播流"
					}
				],
				xinaomen3: [{
						name: '最新一期開獎接口:(平台盤口專用）',
						id: 1,
						checked: true,
						type: 'GET',
						url: 'https://api.macaumarksix.com/api/macaujc3.com',
						requestparams: '',
						value: [{
							"expect": "2024155",
							"opencode": "11,38,43,19,40,07,35",
							"zodiac": "馬,兔,狗,狗,牛,狗,馬",
							"openTime": "2023-06-03 21:32:32",
							"wave": "green,green,green,red,red,red,red",
							"info": "數據來源macaujc.com"
						}]
					},
					{
						name: '一顆一顆開獎接口（資料網專用）',
						id: 2,
						checked: false,
						type: 'GET',
						url: 'https://api.macaumarksix.com/api/live3',
						requestparams: '',
						value: [{
							"expect": "2024155",
							"opencode": "11,38,43,19,40,07,35",
							"zodiac": "馬,兔,狗,狗,牛,狗,馬",
							"openTime": "2023-06-03 21:32:32",
							"wave": "green,green,green,red,red,red,red",
							"info": "數據來源macaujc.com"
						}]
					},
					{
						name: '歷史開獎接口',
						id: 3,
						checked: false,
						type: 'GET',
						url: 'https://api.macaumarksix.com/history/macaujc3/y/${year}',
						requestparams: {
							cs: 'year',
							cs2: 'number 年份',
							istrue: '必須'
						},
						value: {
							"result": true,
							"message": "操作成功！",
							"code": 200,
							"data": {
								"result": true,
								"message": "操作成功！",
								"code": 200,
								"data": [{
									"expect": "2024155",
									"opencode": "11,38,43,19,40,07,35",
									"zodiac": "馬,兔,狗,狗,牛,狗,馬",
									"openTime": "2024-06-03 21:32:32",
									"type": "macaujc3",
									"wave": "green,green,green,red,red,red,red",
									"info": "數據來源macaujc.com"
								}],
								"timestamp": 1717468655066
							}
						}
					},
					{
						name: '按期號查詢',
						id: 4,
						checked: false,
						type: 'GET',
						url: 'https://api.macaumarksix.com/history/macaujc3/expect/${number}',
						requestparams: {
							cs: 'number',
							cs2: 'number 期號',
							istrue: '必須'
						},
						value: {
							"result": true,
							"message": "操作成功！",
							"code": 200,
							"data": [
								null
							],
							"timestamp": 1717468688977
						}
					},
					{
						name: '直播調用接口flv',
						id: 5,
						checked: false,
						type: 'GET',
						url: 'https://live-macaujc.com/live/livestream/macaujc2130.flv',
						requestparams: '',
						value: "直播流"
					},
					{
						name: '直播調用接口m3u8',
						id: 6,
						checked: false,
						type: 'GET',
						url: 'https://live-macaujc.com/live/livestream/macaujc2130.m3u8',
						requestparams: '',
						value: "直播流"
					}
				],
			}
		},
		mounted() {
			this.getDeviceWidth()
		},
		methods: {
			checktab(e, i) {
				console.log(e, i);
				this.tab.forEach(item => {
					if (e.value == item.value) {
						item.checked = true
					} else {
						item.checked = false
					}
				})
				this.tabname = e.name
			},
			backpage() {
				uni.navigateBack()
			},
			checkxinaomen(e, i) {
				this.xinaomen.forEach(item => {
					if (item.id == e.id) {
						item.checked = true
					} else {
						item.checked = false
					}
				})
			},
			checkxinaomen2(e, i) {
				this.xinaomen2.forEach(item => {
					if (item.id == e.id) {
						item.checked = true
					} else {
						item.checked = false
					}
				})


			},
			checkxinaomen3(e, i) {
				this.xinaomen3.forEach(item => {
					if (item.id == e.id) {
						item.checked = true
					} else {
						item.checked = false
					}
				})
			},


			copyurl(e) {
				const textToCopy = JSON.stringify(e, null, 2);
				uni.setClipboardData({
					data: textToCopy,
					success: function() {
						console.log('success');
					},
					complete(res) {
						console.log(res);
					}
				});
			},
			getDeviceWidth() {
				const systemInfo = uni.getSystemInfoSync();
				const screenWidth = systemInfo.screenWidth;

				// 判断是否为PC设备
				if (screenWidth >= 768) {
					this.deviceWidth = 350; // 如果是PC，使用默认宽度350px
					this.deviceWidth2 = 350
				} else {
					this.deviceWidth = null; // 如果是手机，使用实际屏幕宽度
					this.deviceWidth2 = screenWidth - 20
				}
				console.log(this.deviceWidth);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-mobile {
		height: 100%;
		box-sizing: border-box;
	}

	.navbar {
		height: 100rpx;
		background-color: #1a3d96;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		overflow: hidden;
		box-sizing: border-box;
	}

	.nav-left {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav-center {
		font-size: 36rpx;
		text-align: center;
	}

	.nav-right {
		height: 100%;
		width: 1.6rem;
	}

	.frequency-box {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		padding: 0 2.57px;
		justify-content: space-between;
	}

	.frequency-item {
		color: #000;
		// background-color: #ded9d9;
		font-weight: bolder;
		font-size: 17px;
		padding: 7px;
		margin-right: 7px;
		cursor: pointer;
	}

	.active {
		width: 40%;
		color: #333 !important;
		background: #fff;
		border-bottom: 1px solid black;
		text-align: center;
		font-size: 26rpx;
	}

	.noactive {
		width: 40%;
		color: #333 !important;
		background: #fff;
		text-align: center;
		font-size: 26rpx;
	}

	.rimg {
		width: 30rpx;
		height: 30rpx;
		margin-left: 20rpx;
	}

	.rimg2 {
		width: 30rpx;
		height: 30rpx;
		transform: rotate(90deg);
		margin-left: 20rpx;
	}

	.nametxt {
		font-size: 30rpx;
		font-weight: 550;
	}

	.dis {
		display: flex;
		align-items: center;
	}

	.disnoa {
		display: flex;
	}

	.jktype {
		width: 100rpx;
		height: 40rpx;
		text-align: center;
		padding: 4rpx 6rpx;
		border-radius: 10rpx;
		background: #1a3d96;
		font-size: 28rpx;
		color: #fff;
	}

	.jkurl {
		width: 80%;
		font-size: 32rpx;
		word-break: break-all;
		margin-left: 10rpx;
	}

	.qngqiucans {
		width: 90%;
		margin: 0 auto;
		font-size: 30rpx;
		color: #1a3d96;
		text-align: center;
		padding: 10rpx;
		border: 1px solid hsla(0, 0%, 80%, .51);
		;
	}

	.allfor {
		margin-bottom: 30rpx;
	}

	.qqcstxt {
		font-size: 32rpx;
		font-weight: 550;
		margin: 20rpx 0;
	}

	.nianfen {
		padding: 6rpx 10rpx;
		background-color: rgba(26, 61, 150, .24);
		color: #1a3d96;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.nianfenzhi {
		margin-right: 30rpx;
	}

	.xiangyingit {
		width: 90%;
		border: 1px solid #eee;
		margin: 0 auto;
	}

	.fuzhianniu {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.copyan {
		font-size: 26rpx;
		margin-right: 30rpx;
	}

	.copyancg {
		font-size: 26rpx;
		margin-right: 30rpx;
		color: #49b3ff;
		;
	}
</style>